<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  /** 按钮类型 */
  type?: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default';
  /** 按钮大小 */
  size?: 'large' | 'middle' | 'small';
  /** 是否加载中 */
  loading?: boolean;
  /** 是否禁用 */
  disabled?: boolean;
  /** 是否幽灵按钮 */
  ghost?: boolean;
  /** 自定义类名 */
  customClass?: string;
}

const props = withDefaults(defineProps<Props>(), {
  type: 'default',
  size: 'middle',
  loading: false,
  disabled: false,
  ghost: false,
  customClass: ''
});

const emit = defineEmits<{
  click: [event: MouseEvent];
}>();

const buttonClass = computed(() => {
  return `business-button ${props.customClass}`;
});

function handleClick(event: MouseEvent) {
  emit('click', event);
}
</script>

<template>
  <AButton
    :type="type"
    :size="size"
    :loading="loading"
    :disabled="disabled"
    :ghost="ghost"
    :class="buttonClass"
    v-bind="$attrs"
    @click="handleClick"
  >
    <template v-if="$slots.icon" #icon>
      <slot name="icon" />
    </template>

    <slot />
  </AButton>
</template>

<style scoped>
.business-button {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid #d9d9d9;
}

.business-button:hover {
  transform: translateY(-1px);
}

.business-button.ant-btn-primary {
  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
  border-color: #1890ff;
}

.business-button.ant-btn-primary:hover {
  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
  border-color: #40a9ff;
}

.business-button.ant-btn-default:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.business-button.ant-btn-ghost:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.business-button.ant-btn-dashed:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.business-button.ant-btn-link:hover {
  color: #40a9ff;
}

.business-button.ant-btn-text:hover {
  color: #40a9ff;
  background-color: rgba(24, 144, 255, 0.05);
}

/* 不同尺寸的按钮 */
.business-button.ant-btn-lg {
  height: 44px;
  padding: 8px 16px;
  font-size: 16px;
}

.business-button.ant-btn-sm {
  height: 28px;
  padding: 4px 12px;
  font-size: 12px;
}

/* 加载状态 */
.business-button.ant-btn-loading {
  pointer-events: none;
}

/* 禁用状态 */
.business-button.ant-btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.business-button.ant-btn-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* 暗色主题适配 */
.dark .business-button {
  border-color: #434343;
}

.dark .business-button.ant-btn-default {
  background: #1f1f1f;
  border-color: #434343;
  color: #fff;
}

.dark .business-button.ant-btn-default:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.dark .business-button.ant-btn-ghost {
  color: #fff;
  border-color: #434343;
}

.dark .business-button.ant-btn-ghost:hover {
  border-color: #1890ff;
  color: #1890ff;
}
</style>
